<template xmlns="">
  <div style="display: flex;display: -webkit-flex;flex-direction: column;width:100%;height:100%">

    <div class="yi">
    	<div class="te"></div>
      <van-icon
        name="arrow-left"
        fixed="true"
        @click="onClickLeft"></van-icon>
      <div>
        <van-icon
          name="shop-o"></van-icon>
        <router-link to="/bwmxlfb"> <span class="yiyi">帮我买</span></router-link>

        <van-icon
          name="arrow-down"></van-icon>
      </div>
      <van-icon
        name="chat"></van-icon>
        
    </div>

    <div class="er" style="flex: 1;">

      <input type="text" class="eryi" placeholder ="帮我购买:" style="font-size: 12px;">

      <div class="erer">
        <div style="display: flex;justify-content: space-around">
          <div class="er21">选择店铺</div>
          <div class="er22">
            <van-icon
              name="star-o"></van-icon>就近购买</div>
        </div>
        <router-link to="/gmdzfb">
        <p style="float:left;font-size: 13px;margin-left: 20px;">请选择购买地址</p>
        </router-link>
      </div>

      <div class="erer">
        <div style="display: flex;justify-content: space-around">
          <div class="er21">家的地址</div>
          <div class="er22">
            常用地址</div>
        </div>
        <router-link to="/shdzfb">
        	<p style="float:left;font-size: 13px;margin-left: 20px;">请选择收货地址</p>
      	</router-link>
      </div>

      <div class="ersi">
      	<router-link to="/gmsjfb">
        <input type="text" placeholder="购买时间："  class="gm" >
        <span style="border:0;line-height: 60px;height:58px;color:#ccc">立即购买
        </span>
        </router-link>
        <van-icon
          name="arrow"></van-icon>
      </div>

      <div class="erwu">
      	<router-link to="/yhfb">
        <input type="text" placeholder="优惠券选择：" class="yh" >
        <span style="border:0;line-height: 60px;height:58px;color:#ccc">新用户立减20元
        </span>
        </router-link>
        <van-icon
          name="arrow"></van-icon>
      </div>

      <div class="erliu">
      	<router-link to="/spjgfb">
        <input type="text" placeholder="排队目的商品价格：" class="pd" >
        <span style="    width: 40%;  display: inline-block; overflow: hidden; border:0;line-height: 60px;height:58px;color:#ccc ">亲输入商品价格货凭小票支付
        </span>
        </router-link>
        <van-icon
          name="gold-coin-o"></van-icon>
      </div>
  </div>

    <div class="san">
      <div style="height:15%;width:100%;border-bottom: 1px solid #ccc;text-align: center;">
      	<span style="margin-top: 6%;display: inline-block;">
      		付款详情
      	</span>

      	<van-icon name="cross" @click="onClickLeft()"/>
      </div>
      
      <div style="height:19%;width:100%;border-bottom: 1px solid #ccc;text-align: center;">
      	<p style="    margin-top: 1%;margin-bottom: 1%;">需付金额</p>
      	<p style="    font-size: 40px;margin-top: 3%;margin-bottom: 0;">7:00</p>
      </div>
      
      <div style="height:15%;width:100%;border-bottom: 1px solid #ccc;">
      	<div>
      		<van-icon name="add-square" size="55px"/>
      		<div style="float:left">
      			<p style="margin: 0;padding:0;    margin-top: 6%;">账户支付</p>
      			<p style="margin: 0;padding:0;margin-top: 6%;">账户余额：￥0:00</p>
      		</div>
      		<van-icon name="passed" size="17px"/>
      	</div>
      	
      	<div>
      		
      	</div>
      	
      	<div></div>
      	
      </div>

      <div style="height:15%;width:100%;border-bottom: 1px solid #ccc;">
        <div>
          <van-icon name="add-square" size="55px"/>
          <div style="float:left">
            <p style="margin: 0;padding:0;    margin-top: 30%;">微信支付</p>
          </div>
          <van-icon name="checked" size="17px"/>
        </div>

        <div>

        </div>

        <div></div>

      </div>

      <div style="height:15%;width:100%;border-bottom: 1px solid #ccc;">
        <div>
          <van-icon name="add-square" size="55px"/>
          <div style="float:left">
            <p style="margin: 0;padding:0;    margin-top: 30%;">微信支付</p>
          </div>
          <van-icon name="passed" size="17px"/>
        </div>

        <div>

        </div>

        <div></div>

      </div>

      <div style="    width: 100%;height: 18.5%;background:#FBBE65;text-align: center;font-size:31px ;">
        <router-link to="/bwmfb">
        <span style="margin-top: 5%;display: inline-block">确认付款</span>
        </router-link>
      </div>
      
    </div>
</div>
</template>

<script>
  export default {
    name: "Xdfb",
    data() {
      return {

      }
    },
    methods: {
      onClickLeft() {
       this.$router.go(-1)
      },
    }
  }
</script>

<style scoped>
  .yi{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .van-icon-chat{
    margin-right: 15px;
  }
  .van-icon-arrow-left{
    margin-left: 15px;
  }
  .er{
    background: #f2eef4;
    overflow: auto;
  }
  .eryi{
    width:90%;
    height:60px;
    background:#fff;
    border-radius: 4px;
    margin: 4% 0 4% 5%;
    border:0;
  }
  .erer{
    width:90%;
    height:100px;
    background:#fff;
    border-radius: 4px;
    margin: 4% 0 4% 5%;
    border:0;
  }
  .er21{
    width:100px;
    height:22px;
    border-radius: 4px;
    font-size:12px;
    border:1px solid #ccc;
    float:left;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;

  }
  .er22{
    width:100px;
    height:22px;
    border-radius: 4px;
    font-size:12px;
    border:1px solid #ccc;
    float:left;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;

  }
  .ersi{
    width:90%;
    height:60px;
    background:#fff;
    border-radius: 4px;
    margin-left: 5%;
    border:0;
    font-size: 12px;

  }
  .er .van-icon-arrow{
    float:right;
    line-height: 60px;
    margin-right: 5%;
  }
  .van-icon-gold-coin-o{
    float:right;
    line-height: 60px;
    margin-right: 5%;
  }
  .erwu{
    width:90%;
    height:60px;
    background:#fff;
    border-radius: 4px;
    margin: 4% 0 4% 5%;
    border:0;
    font-size: 12px;
  }
  .erliu{
    width:90%;
    height:60px;
    background:#fff;
    border-radius: 4px;
    margin: 0 0 4% 5%;
    border:0;
    font-size: 12px;
  }
  .van-icon-gold-coin{
    position: absolute;
  }
  .te{
  	position: absolute;
    opacity: 0.5;
    width: 100%;
    height: 92%;
    background: #000;
  }
  .san{
  	height: 64%;
    width: 100%;
    background: #fff;
    z-index: 1;
  }
  .van-icon-cross{
  	float:right;
  	margin-top: 7%;
  }
  .van-icon-add-square{
  	margin-left: 5%;
  	margin-right: 3%;
  	float:left;
  }
  .van-icon-checked{
  	float:right;
  	margin-top: 5%;
    margin-right: 5%;
  }
  .van-icon-passed{
  	float:right;
  	margin-top: 5%;
    margin-right: 5%;
  }
  .gm{width: 20%; border:0; float:left;line-height: 60px;height:58px;margin-left: 7%}
  .yh{width: 24%; border:0; float:left;line-height: 60px;height:58px;margin-left: 7%}
  .pd{width: 38%; border:0; float:left;line-height: 60px;height:58px;margin-left: 7%}
</style>
